<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <text class="iconfont icon-search"></text>
      <input 
        type="text" 
        v-model="searchKey" 
        placeholder="搜索目的地/景点/酒店" 
        focus
        @input="onSearch"
        @confirm="doSearch"
      />
      <text class="clear" v-if="searchKey" @tap="clearSearch">清空</text>
    </view>

    <!-- 搜索历史 -->
    <view class="history" v-if="!searchKey && history.length">
      <view class="section-header">
        <text class="title">搜索历史</text>
        <text class="clear" @tap="clearHistory">清空历史</text>
      </view>
      <view class="history-list">
        <view 
          class="history-item" 
          v-for="(item, index) in history" 
          :key="index"
          @tap="useHistory(item)"
        >
          <text class="iconfont icon-time"></text>
          <text class="text">{{item}}</text>
        </view>
      </view>
    </view>

    <!-- 热门搜索 -->
    <view class="hot" v-if="!searchKey">
      <view class="section-header">
        <text class="title">热门搜索</text>
      </view>
      <view class="hot-list">
        <view 
          class="hot-item" 
          v-for="(item, index) in hotSearches" 
          :key="index"
          @tap="useHot(item)"
        >
          <text class="rank" :class="{ top: index < 3 }">{{index + 1}}</text>
          <text class="text">{{item.keyword}}</text>
          <text class="count">{{item.count}}次搜索</text>
        </view>
      </view>
    </view>

    <!-- 搜索建议 -->
    <view class="suggestions" v-if="searchKey && suggestions.length">
      <view 
        class="suggestion-item"
        v-for="(item, index) in suggestions"
        :key="index"
        @tap="useSuggestion(item)"
      >
        <text class="iconfont icon-search"></text>
        <view class="content">
          <text class="name">{{item.name}}</text>
          <text class="type">{{item.type}}</text>
        </view>
      </view>
    </view>

    <!-- 搜索结果 -->
    <view class="search-result" v-if="searching">
      <view class="filter-bar">
        <view 
          class="filter-item" 
          v-for="(item, index) in filters" 
          :key="index"
          :class="{ active: currentFilter === item.type }"
          @tap="switchFilter(item.type)"
        >
          <text>{{item.name}}</text>
          <text class="count">({{item.count}})</text>
        </view>
      </view>
      
      <view class="result-list">
        <view 
          class="result-item"
          v-for="(item, index) in searchResults"
          :key="index"
          @tap="goToDetail(item)"
        >
          <image class="image" :src="item.image" mode="aspectFill"></image>
          <view class="info">
            <view class="name">{{item.name}}</view>
            <view class="desc">{{item.desc}}</view>
            <view class="price" v-if="item.price">
              <text class="symbol">¥</text>
              <text class="number">{{item.price}}</text>
              <text class="unit">起</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
      searching: false,
      history: ['故宫博物院', '八达岭长城', '北京欢乐谷'],
      hotSearches: [
        { keyword: '故宫博物院', count: '12.5万' },
        { keyword: '八达岭长城', count: '8.9万' },
        { keyword: '颐和园', count: '6.7万' },
        { keyword: '天安门广场', count: '5.4万' },
        { keyword: '北京欢乐谷', count: '4.8万' }
      ],
      suggestions: [],
      filters: [
        { type: 'all', name: '全部', count: 108 },
        { type: 'scenic', name: '景点', count: 58 },
        { type: 'hotel', name: '酒店', count: 36 },
        { type: 'article', name: '文章', count: 14 }
      ],
      currentFilter: 'all',
      searchResults: [
        {
          type: 'scenic',
          name: '故宫博物院',
          desc: '中国明清两代的皇家宫殿，世界上现存规模最大的宫殿建筑群',
          image: '/static/images/scenic1.jpg',
          price: 60
        },
        {
          type: 'hotel',
          name: '北京四季酒店',
          desc: '奢华五星级酒店，地理位置优越',
          image: '/static/images/hotel1.jpg',
          price: 1288
        }
      ]
    }
  },
  methods: {
    onSearch(e) {
      const value = e.detail.value
      if (value) {
        // TODO: 获取搜索建议
        this.suggestions = [
          { name: '故宫博物院', type: '景点' },
          { name: '故宫角楼咖啡', type: '美食' }
        ]
      } else {
        this.suggestions = []
      }
    },
    
    doSearch() {
      if (!this.searchKey) return
      
      // 添加到搜索历史
      if (!this.history.includes(this.searchKey)) {
        this.history.unshift(this.searchKey)
        // 最多保留10条历史记录
        if (this.history.length > 10) {
          this.history.pop()
        }
      }
      
      this.searching = true
      this.suggestions = []
      // TODO: 调用搜索接口
    },
    
    clearSearch() {
      this.searchKey = ''
      this.searching = false
      this.suggestions = []
    },
    
    clearHistory() {
      this.history = []
    },
    
    useHistory(keyword) {
      this.searchKey = keyword
      this.doSearch()
    },
    
    useHot(item) {
      this.searchKey = item.keyword
      this.doSearch()
    },
    
    useSuggestion(item) {
      this.searchKey = item.name
      this.doSearch()
    },
    
    switchFilter(type) {
      this.currentFilter = type
      // TODO: 根据筛选条件更新搜索结果
    },
    
    goToDetail(item) {
      const urls = {
        scenic: '/pages/scenic/detail',
        hotel: '/pages/hotel/detail',
        article: '/pages/article/detail'
      }
      this.$navigateTo(`${urls[item.type]}?id=${item.id || 1}`)
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #fff;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background: #f8f8f8;
  
  .iconfont {
    font-size: 32rpx;
    color: #999;
    margin-right: 10rpx;
  }
  
  input {
    flex: 1;
    height: 72rpx;
    font-size: 28rpx;
  }
  
  .clear {
    font-size: 28rpx;
    color: #999;
    margin-left: 20rpx;
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .clear {
    font-size: 28rpx;
    color: #999;
  }
}

.history {
  .history-list {
    padding: 0 30rpx;
    
    .history-item {
      display: flex;
      align-items: center;
      height: 88rpx;
      
      .iconfont {
        font-size: 32rpx;
        color: #999;
        margin-right: 10rpx;
      }
      
      .text {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}

.hot {
  .hot-list {
    padding: 0 30rpx;
    
    .hot-item {
      display: flex;
      align-items: center;
      height: 88rpx;
      
      .rank {
        width: 40rpx;
        font-size: 32rpx;
        color: #999;
        
        &.top {
          color: #ff4d4f;
          font-weight: bold;
        }
      }
      
      .text {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }
      
      .count {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.suggestions {
  .suggestion-item {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    
    .iconfont {
      font-size: 32rpx;
      color: #999;
      margin-right: 10rpx;
    }
    
    .content {
      flex: 1;
      
      .name {
        font-size: 28rpx;
        color: #333;
      }
      
      .type {
        font-size: 24rpx;
        color: #999;
        margin-left: 10rpx;
      }
    }
  }
}

.search-result {
  .filter-bar {
    display: flex;
    padding: 20rpx 0;
    background: #fff;
    border-bottom: 1rpx solid #eee;
    
    .filter-item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      color: #333;
      
      &.active {
        color: #4080ff;
        font-weight: bold;
      }
      
      .count {
        font-size: 24rpx;
        color: #999;
        margin-left: 4rpx;
      }
    }
  }
  
  .result-list {
    padding: 20rpx;
    
    .result-item {
      display: flex;
      padding: 20rpx;
      background: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      
      .image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }
      
      .info {
        flex: 1;
        
        .name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 10rpx;
        }
        
        .desc {
          font-size: 28rpx;
          color: #666;
          margin-bottom: 20rpx;
        }
        
        .price {
          .symbol {
            font-size: 24rpx;
            color: #ff4d4f;
          }
          
          .number {
            font-size: 36rpx;
            font-weight: bold;
            color: #ff4d4f;
          }
          
          .unit {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
}
</style> 